<template>
  <div class="table-box">
    <ProTable ref="proTableRef" :columns="columns" :request-api="fetchArticleList">
      <template #tableHeader>
        <div>
          <el-button type="primary" v-auth="'Article.Article.AddArticle'" @click="open">新增文章</el-button>
        </div>
      </template>
    </ProTable>

    <Edit ref="editRef" @success="refresh"></Edit>
    <View ref="viewRef"></View>
  </div>
</template>

<script lang="tsx" setup>
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { ref } from "vue";
import { fetchArticleList, onOffArticle, removeArticle } from "@/api/modules/article";
import { fmt } from "@/utils/date";
import Edit from "./components/edit.vue";
import View from "./components/view.vue";
import { RefOpenEventProps } from "@/typings/interface";
import { ArticleSchema } from "@/schema";
import { ResultEnum } from "@/enums/httpEnum";
import { ElMessageBox, ElNotification } from "element-plus";

const viewRef = ref<RefOpenEventProps<ArticleSchema>>();
const editRef = ref<RefOpenEventProps<ArticleSchema>>();
const proTableRef = ref<ProTableInstance>();
const columns: ColumnProps[] = [
  { type: "index", label: "序号", fixed: "left", width: 80 },
  { prop: "articleName", label: "文章名称", search: { el: "input" }, width: 200 },
  { prop: "articleSubName", label: "文章副标题", width: 200 },
  { prop: "author", label: "作者", search: { el: "input" }, width: 200 },
  // { prop: "intro", label: "文章简介" },
  { prop: "category.categoryName", label: "文章分类" },
  {
    prop: "off",
    label: "文章是否禁用",
    width: 200,
    render({ row }) {
      return (
        <>
          <el-switch v-auth="Article.Article.EditArticle" v-model={row.off} onChange={() => changeOnOff(row)} />
        </>
      );
    }
  },
  { prop: "createAt", label: "创建时间", width: 200, render: ({ row }) => <span>{fmt(row.createAt)}</span> },
  {
    prop: "action",
    label: "操作",
    fixed: "right",
    width: 200,
    render({ row }) {
      return (
        <>
          <el-button type="success" link onClick={() => view(row)}>
            预览
          </el-button>
          <el-button v-auth="Article.Article.EditArticle" type="primary" link onClick={() => edit(row)}>
            编辑
          </el-button>
          <el-button v-auth="Article.Article.RemoveArticle" type="danger" link onClick={() => remove(row)}>
            删除
          </el-button>
        </>
      );
    }
  }
];

function changeOnOff(row) {
  onOffArticle({ id: row.id }).then(r => {
    const { code, message } = r;
    if (code === ResultEnum.SUCCESS) {
      ElNotification.success("修改成功！");
      refresh();
    } else {
      ElNotification.error(message);
    }
  });
}

function view(row) {
  viewRef.value?.open(row);
}

function open() {
  editRef.value?.open();
}

function edit(row) {
  editRef.value?.open(row);
}

function remove(row) {
  ElMessageBox.confirm("提示", { type: "error", message: "是否删除当前数据？" })
    .then(() => {
      if (row?.id) {
        removeArticle({ id: row.id }).then(r => {
          const { code, message } = r;
          if (code == ResultEnum.SUCCESS) {
            ElNotification.success("删除成功！");
            refresh();
          } else {
            ElNotification.error(message);
          }
        });
      }
    })
    .catch(err => {
      console.error(err);
    });
}

function refresh() {
  proTableRef.value?.getTableList();
}
</script>
